<template>
  <div>
    <el-card>
      <el-row :gutter="24" class="mb8">
        <el-col :span="8">
          <span class="exam_span" style="margin-left:30px">考试状态：</span>
          <el-select v-model="queryParams.status" placeholder="请选择" @change="changeStatus">
            <el-option
              v-for="dict in dict.type.user_paper_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <span class="exam_span">试卷状态：</span>
          <el-select
            v-model="queryParams.paperStatus"
            placeholder="请选择"
            @change="changePaperStatus"
          >
            <el-option
              v-for="dict in dict.type.paper_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <div class="search">
            <el-input
              v-model="queryParams.paperName"
              placeholder="搜索课程"
              prefix-icon="el-icon-search"
            >
              <el-button type="primary" slot="append" icon="el-icon-search" @click="searchExam"></el-button>
            </el-input>
          </div>
        </el-col>
        <el-col :span="2">
          <el-button icon="el-icon-refresh" @click="reflash"></el-button>
        </el-col>
      </el-row>
      <el-table :data="paperList" style="margin-top:20px">
        <el-table-column
          label="试卷名称"
          align="center"
          prop="paperName"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="总分" align="center" prop="paperNowScore">
          <template slot-scope="scope">
            <span>{{scope.row.paperNowScore}}</span>
          </template>
        </el-table-column>
        <el-table-column label="考试时长" align="center" prop="paperDuration">
          <template slot-scope="scope">
            <span>{{scope.row.paperDuration}}分钟</span>
          </template>
        </el-table-column>
        <el-table-column
          label="开考时间"
          align="center"
          prop="paperStartTime"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.paperStartTime, '{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="结束时间"
          align="center"
          prop="paperEndTime"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.paperEndTime, '{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="试卷状态" align="center" prop="paperStatus">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.paper_status" :value="scope.row.paperStatus" />
          </template>
        </el-table-column>
        <el-table-column label="用户得分" align="center" prop="score">
          <template slot-scope="scope">
            <span>{{scope.row.score}}</span>
          </template>
        </el-table-column>
        <el-table-column label="考试状态" align="center" prop="status">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.user_paper_status" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="160">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.paperStatus==1&&scope.row.status==0"
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleBegin(scope.row.paperId)"
            >开始考试</el-button>
            <el-button
              v-if="scope.row.paperStatus==1&&scope.row.status==1"
              size="mini"
              type="text"
              icon="el-icon-time"
              @click="handleAgain(scope.row.paperId)"
            >继续考试</el-button>
            <el-button
              v-if="scope.row.status==2"
              size="mini"
              type="text"
              icon="el-icon-info"
              @click="handleInfo(scope.row.paperId)"
            >考试详情</el-button>
            <el-button
              v-if="scope.row.status==2"
              size="mini"
              type="text"
              icon="el-icon-info"
              @click="handleRank(scope.row.paperId)"
            >成绩排行</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 成绩排名 -->
    <el-dialog
      title="考试用户成绩排名"
      :visible.sync="userRank.show"
      width="40%"
      append-to-body
      :destroy-on-close="true"
    >
      <div style="height: 60vh;">
        <el-table :data="userRank.data" height="100%">
          <el-table-column label="姓名" align="center" prop="name" :show-overflow-tooltip="true" />
          <el-table-column label="成绩" align="center" prop="score" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span v-if="scope.row.score!=null">{{scope.row.score}}</span>
              <span v-else>未考试</span>
            </template>
          </el-table-column>
          <el-table-column label="排名" align="center" prop="rank" :show-overflow-tooltip="true" />
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPaperList, toExam, examInfo, userRank } from "@/api/exam";
export default {
  name: "exam",
  dicts: ["paper_status", "user_paper_status"],
  data() {
    return {
      paperList: [],
      queryParams: {
        pageSize: 1,
        pageNum: 8,
        paperName: null,
        paperStatus: null,
        status: null
      },
      userRank: {
        show: false,
        data: []
      }
    };
  },
  created() {
    this.getPaperList();
  },
  methods: {
    getPaperList() {
      getPaperList(this.queryParams).then(res => {
        if (res.code == 200) {
          this.paperList = res.data;
        }
      });
    },
    changePaperStatus() {
      this.getPaperList();
    },
    changeStatus() {
      this.getPaperList();
    },
    searchExam() {
      if (
        this.queryParams.paperName !== null &&
        this.queryParams.paperName !== ""
      ) {
        this.getPaperList();
      }
    },
    reflash() {
      this.queryParams.paperStatus = null;
      this.queryParams.paperName = null;
      this.queryParams.status = null;
      this.getPaperList();
    },
    // 开始考试
    handleBegin(paperId) {
      let loading;
      this.$confirm("是否确定进入考试？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          loading = this.$loading({
            lock: true,
            text: "试卷初始化中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          toExam({ paperId: paperId }).then(res => {
            const { href } = this.$router.resolve({
              path: "/examInfo",
              query: {
                paperId: paperId
              }
            });
            window.open(href, "_blank");
          });
        })
        .finally(() => {
          loading.close();
        });
    },
    // 继续考试
    handleAgain(paperId) {
      let loading;
      this.$confirm("是否确定继续考试？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          loading = this.$loading({
            lock: true,
            text: "试卷加载中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          toExam({ paperId: paperId }).then(res => {
            const { href } = this.$router.resolve({
              path: "/examInfo",
              query: {
                paperId: paperId
              }
            });
            window.open(href, "_blank");
          });
        })
        .finally(() => {
          loading.close();
        });
    },
    // 考试详情
    handleInfo(paperId) {
      examInfo({ paperId: paperId }).then(res => {
        const { href } = this.$router.resolve({
          path: "/examInfo",
          query: {
            paperId: paperId
          }
        });
        window.open(href, "_blank");
      });
    },
    handleRank(paperId) {
      userRank({ paperId: paperId }).then(res => {
        this.userRank.data = res.data;
        this.userRank.show = true;
      });
    }
  }
};
</script>

<style scoped>
.el-card {
  min-height: 600px;
}
.exam_span {
  font-size: 16px;
  color: #909399;
  line-height: 40px;
}

.search {
  display: block;
  float: right;
  padding-right: 30px;
}

.search {
  margin-right: 15px;
  color: white;
}

.search .el-button {
  background-color: #409eff;
  border-radius: 0 4px 4px 0;
  border: 1px solid #409eff;
  color: white;
  font-size: 14px;
}

.search .el-button:hover {
  transform: scale(1.05);
  transition: all 0.2s;
}
</style>